<!--首页一进来用于显示用户的个人信息和更改密码-->

<template>
  <div>
    <el-card class="out-box" shadow="never" v-if="accountIdentify !== 'admin'">
      <el-button type="primary" class="update-password" @click="dialogFormVisible = true">修改密码</el-button>
      <!--      任何账户都有的账户名字的信息-->
      <el-form :model="infoForm" class="input-box">
        <el-form-item label="用户账号:" label-width="100px;">
          <span class="text">{{ accountIdentify }}</span>
        </el-form-item>
      </el-form>
      <!--      只有师傅管理员才有的师傅信息-->
      <div class="form-class" v-if="accountIdentify !== 'admin'">
        <el-form :model="infoForm" class="input-box">
          <el-form-item label="编号ID:" label-width="100px;">
            <span class="text">{{ infoForm.id }}</span>
          </el-form-item>
          <el-form-item label="用户姓名:" label-width="100px;">
            <span class="text">{{ infoForm.name }}</span>
          </el-form-item>
          <el-form-item label="用户性别:" label-width="100px;">
            <span class="text">{{ infoForm.gender | getGenderText }}</span>
          </el-form-item>
        </el-form>
        <div class="brief-box">
          <span class="title">用户简介：</span>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="infoForm.specialty"
            class="brief"
            maxlength="500"
            show-word-limit
            disabled
            :autosize="{ minRows: 5, maxRows: 5}">
          </el-input>
        </div>
      </div>
    </el-card>
    <div class="dashboard-editor-container" v-if="accountIdentify === 'admin'">

      <panel-group @handleSetLineChartData="handleSetLineChartData"
                   :inventory="inventory[0] === '暂无数据' ? 0 :inventory.length"
                   :repair-time="repairTime[0] === '暂无数据' ? 0 : repairTime.length"/>

      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">

        <div style="width: 100%;padding-bottom: 10px;margin-top: -10px;">
          <line-chart :chart-data="lineChartData"/>
        </div>
      </el-row>

    </div>

    <!--     点击修改密码的按钮跳出来的弹出框-->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="35%"
               @close="cancelModal" v-loading="isLoading">
      <el-form ref="passwordForm" :rules="rules" :model="passwordForm">
        <el-form-item label="旧密码：" label-width="120px" prop="password">
          <el-input v-model="passwordForm.password" style="width: 90%;" autofocus type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" label-width="120px" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" style="width: 90%;" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：" label-width="120px" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" style="width: 90%;" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelModal">取 消</el-button>
        <el-button type="primary" @click="updatePassword('passwordForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {getCookie} from "@/utils/cookies";
import {getDoctorInfo} from "@/api/doctor";
import {tips} from "@/common/js/optionTips";
import {updatePassword} from "@/api/login";
import SHA256 from 'js-sha256';
import PanelGroup from '@/view/dashboard/PanelGroup'
import LineChart from '@/view/dashboard/LineChart'

const lineChartData = {
  newVisitis: {
    inputData: [],
    outputData: [],
    lendData: []
  }
}

export default {
  name: "home",
  components: {
    PanelGroup,
    LineChart,
  },
  data() {
    return {
      repairTime: [],
      inventory: [],
      lineChartData: lineChartData.newVisitis,

      // 只用于师傅的infoForm
      infoForm: {},
      accountIdentify: '', // 用于判断是不是系统管理员
      // 弹出框
      dialogFormVisible: false,
      passwordForm: {
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        password: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
        newPassword: [{required: true, message: '请输入新密码', trigger: 'blur'}],
        confirmPassword: [{required: true, message: '请再次确认密码', trigger: 'blur'}]
      },
      isLoading: false
    }
  },
  activated() {
    this.getList();
  },
  methods: {
    getList() {
      lineChartData.newVisitis.inputData = [12, 32, 45, 15,42, 50, 15]
      lineChartData.newVisitis.outputData = [80, 89, 98, 106, 125, 100, 130]
      lineChartData.newVisitis.lendData = [25, 30, 45, 10, 15, 14, 30]
      // queryRepairTime().then(res=>{
      //   this.repairTime = res.rows
      // });
      // queryInventory().then(res=>{
      //   this.inventory = res.rows
      // })
      // queryLineChartData().then(res=>{
      //   lineChartData.newVisitis.inputData = res.data[0]
      //   lineChartData.newVisitis.outputData = res.data[1]
      //   lineChartData.newVisitis.lendData = res.data[2]
      // })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },

    // 点击关闭取消模态框
    cancelModal: function (e) {
      this.dialogFormVisible = false;
      this.passwordForm.password = '';
      this.passwordForm.newPassword = '';
      this.passwordForm.confirmPassword = '';
      this.$nextTick(() => {
        this.$refs['passwordForm'].clearValidate()
      })
    },
    // 点击确认修改
    updatePassword: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.passwordForm.newPassword === this.passwordForm.confirmPassword) {
            this.isLoading = true;
            updatePassword({
              accountId: sessionStorage.getItem('accountID'),
              newPassword: SHA256(this.passwordForm.newPassword),
              password: SHA256(this.passwordForm.password)
            }).then(res => {
              if (res.code === 200) {
                this.isLoading = false;
                tips('success', '修改成功');
                this.dialogFormVisible = false;
              } else if (res.code === 404) {
                this.isLoading = false;
                tips('error', '原密码错误')
              }
            }).catch(() => {
              this.isLoading = false;
              tips('error', '更新密码失败')
            })
          } else {
            this.$message.error('新密码两次输入不一致');
          }
        } else {
          return false;
        }
      });
    },
    // 当登录的是师傅的账号时
    getDoctorInfo: function () {
      getDoctorInfo(parseInt(this.accountIdentify)).then(res => {
        if (res.code === 200) {
          this.infoForm = res.data
        }
      }).catch(() => {
        tips('error', '获取师傅信息失败')
      })
    },
  },
  created() {
    this.getList()
    this.accountIdentify = getCookie('username');
    if (this.accountIdentify !== 'admin') {
      this.getDoctorInfo();
    }
    this.$store.dispatch('GetInfo').then(() => {
    })
  }
}
</script>

<style lang="scss">
@import "../../common/scss/common.scss";

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.out-box {
  width: 80%;
  height: auto;
  margin-left: 10%;
  position: relative;

  .input-box {
    width: 60%;
    margin: 0 auto;
    text-align: left;
    margin-left: 5%;

    .text {
      width: 40%;
      height: auto;
      margin-left: 20px;
      @include font-style(16px, $major-blue-color);
    }

  }
}

.form-class {
  width: 100%;
  display: flex;
  flex-direction: row;

  .brief-box {
    @include width-margin(50%, auto);
    @include flex-direction(column);
    text-align: center;
    margin-left: 5%;

    .title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      @include font-style(16px, #000000);
    }

    .brief {
      @include width-margin(90%, auto);
      margin-left: 5%;
    }
  }
}

.update-password {
  width: 20%;
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
